<template>
  <Main @create="create">
    <template #search>
      <Form
        :form-data="formData"
        :control-list="controlList"
        @search="search"
      ></Form>
    </template>
    <template #table>
      <el-table
        :data="tableData"
        :border="true"
        v-loading="loading"
        height="100%"
      >
        <el-table-column
          v-for="tableColumn of tableColumnList"
          :key="tableColumn.uuid"
          :label="tableColumn.label"
          :prop="tableColumn.prop"
          :type="tableColumn.type"
          :width="tableColumn.width"
          header-align="center"
          align="center"
        >
          <template v-if="tableColumn.label === '操作'" #default="{ row }">
            <Operate
              @remove="() => remove(row)"
              @edit="() => edit(row)"
            ></Operate>
          </template>
          <template
            v-else-if="tableColumn.label === '任务内容'"
            #default="{ row }"
          >
            <div>{{ row.content.slice(0, 10) + "..." }}</div>
          </template>
          <template
            v-else-if="tableColumn.label === '是否完成'"
            #default="{ row }"
          >
            <div>
              <el-tag :type="row.isComplete === '1' ? 'success' : 'danger'">{{
                row.isComplete === "1" ? "是" : "否"
              }}</el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #pagination>
      <Pagination
        :pagination="pagination"
        @change="paginationChange"
      ></Pagination>
    </template>
  </Main>
</template>

<script>
import Form from "@/views/component/form/index.vue";
import Main from "@/views/component/main/index.vue";
import Pagination from "@/views/component/pagination/index.vue";
import { startEndEmptyValidator } from "@/utils/validator/index";
import { getTaskByPagination, removeTaskByUuid } from "@/api/task";
import { flushPage } from "@/utils/page";
import { showFlushNg, showRemoveOk, showRemoveNg } from "@/utils/message";
import Operate from "@/views/component/operate/index.vue";
import { getUserByAll } from "@/api/user";
export default {
  name: "Task",
  components: {
    Form,
    Main,
    Pagination,
    Operate,
  },
  beforeRouteEnter(to, from, next) {
    next(async (vm) => {
      await vm.getAllUser();
      await vm.getTaskByPagination();
    });
  },
  methods: {
    async getAllUser() {
      let result = await getUserByAll();
      this.allUser = result.data.list;
    },
    edit(row) {
      this.$router.push({ name: "EditTask", query: row });
    },
    async remove(row) {
      try {
        await removeTaskByUuid(row);
        showRemoveOk();
        await this.getTaskByPagination();
      } catch (error) {
        showRemoveNg(error);
      }
    },
    async paginationChange(currentPage) {
      this.pagination.currentPage = currentPage;
      await this.getTaskByPagination();
    },
    async getTaskByPagination() {
      try {
        this.loading = true;
        let result = await getTaskByPagination({
          ...this.pagination,
          ...this.formData,
        });
        let tempTableData = result.data.list;
        tempTableData = tempTableData.map((task) => {
          let user = this.allUser.find((user) => {
            return user.uuid === task.userUuid;
          });
          return {
            ...task,
            name: user.name,
          };
        });
        this.tableData = tempTableData;
        this.pagination.total = result.data.total;
        await flushPage(
          this.tableData,
          this.pagination,
          this.getTaskByPagination
        );
      } catch (error) {
        showFlushNg(error);
      } finally {
        this.loading = false;
      }
    },
    create() {
      this.$router.push({ name: "CreateTask" });
    },
    async search() {
      await this.getTaskByPagination();
    },
  },
  data() {
    return {
      allUser: [],
      loading: false,
      tableData: [],
      tableColumnList: [
        {
          label: "序号",
          type: "index",
          width: "100px",
        },
        {
          label: "员工姓名",
          prop: "name",
        },
        {
          label: "任务内容",
          prop: "content",
        },
        {
          label: "是否完成",
          prop: "isComplete",
        },
        {
          label: "下发时间",
          prop: "sendDatetime",
        },
        {
          label: "操作时间",
          prop: "opDatetime",
        },
        {
          label: "主键",
          prop: "uuid",
        },
        {
          label: "操作",
          width: "150px",
        },
      ],
      pagination: {
        pageSize: 20,
        currentPage: 1,
        total: 0,
      },
      formData: {
        userUuid: "",
        name: "",
        sendDatetimeRange: [],
        isComplete: "",
      },
      controlList: [
        {
          type: "autocomplete",
          label: "姓名",
          prop: "name",
          clearable: true,
          change: (event) => {
            if (!event.value) {
              let user = this.allUser.find((user) => {
                return user.name === event;
              });
              if (!user) {
                this.formData.name = event;
                this.formData.userUuid = "";
              } else {
                this.formData.name = user.name;
                this.formData.userUuid = user.uuid;
              }
            } else {
              this.formData.name = event?.name;
              this.formData.userUuid = event?.uuid;
            }
          },
          query: (queryString, cb) => {
            let tempUserList = this.allUser.filter((user) => {
              return user.name.includes(queryString);
            });
            tempUserList = tempUserList.map((user) => {
              return {
                ...user,
                label: user.name,
                value: user.name,
              };
            });
            cb(tempUserList);
          },
          rule: [
            {
              trigger: ["blur", "change"],
              validator: (rule, value, callback) => {
                if (
                  this.formData.name.length > 0 &&
                  this.formData.userUuid.length === 0
                ) {
                  return callback("未找到员工");
                }
                return callback();
              },
            },
          ],
        },
        {
          type: "daterange",
          label: "下发时间",
          prop: "sendDatetimeRange",
          clearable: true,
          change: (event) => {
            this.$nextTick(() => {
              this.formData.sendDatetimeRange = event ?? [];
            });
          },
        },
        {
          type: "radio-group",
          label: "是否完成",
          prop: "isComplete",
          progress: 0,
          change: (event) => {
            this.formData.isComplete = event ?? "";
          },
          radioList: [
            {
              label: "忽略",
              value: "",
            },
            {
              label: "是",
              value: "1",
            },
            {
              label: "否",
              value: "2",
            },
          ],
        },
      ],
    };
  },
};
</script>
